<script type="text/javascript">
function approveFriend(emailstr)
{
    new Ajax.Updater('sideBlock', '/friends/approvefriend', {
        parameters: { email: emailstr},
        method: 'post'
    })
}

function disapproveFriend(emailstr)
{
    new Ajax.Updater('sideBlock', '/friends/disapprovefriend', {
        parameters: { email: emailstr },
        method: 'post'
    })
}

function deleteFriend(emailstr)
{
    new Ajax.Updater('sideBlock', '/friends/delete', {
        parameters: { email: emailstr },
        method: 'post'
    })
}
</script>
<div id="sideBlock" class="Block">
	<h4>Friends</h4>
	<div class="infoBlock" id="friendList">
		<ul>
	        {% if friends %}
	           {% for friend in friends %}
   			        <li>
   			            <a href="javascript:;" onclick="deleteFriend('{{friend.friendEmail}}')">
   			            <img src="/images/delete.png" style="float:right;margin-top:4px;border:none" title="delete your friend">
   			            </a>
   			            <img src="http://www.noisewater.net/thumbnail/thewattz"> &nbsp; 
   			            <span>{{friend.friendNickname}}</span>
   			        </li>	               
	           {% endfor %}
            {% else %}
	                <li>
	                    Add some friends!<br> click on 'Add a Friend'
	                </li>
	        {% endif %}
		</ul>
	</div>

	<h4 style="margin-top:8px">Pending Friends</h4>
	<p style="font-size:11px">
	    click: approve <img src="/images/bullet_green.png" style="margin-top:-2px"> or
	    remove <img src="/images/bullet_red.png" style="margin-top:-2px">
	</p>
	<div class="infoBlock" class="overflow:hidden">
		<ul>
	        {% if pendingfriends %}
	           {% for pf in pendingfriends %}
   			        <li style="margin:0;margin-bottom:3px;font-size:12px">
   			            <a href="javascript:;" title="Click to approve friend" onclick="approveFriend('{{pf.email}}')">
                            <img src="/images/bullet_green.png" style="float:left;margin-top:-2px;border:none">
                        </a>
                        <a href="javascript:;" title="Click to remove friend" onclick="disapproveFriend('{{pf.email}}')">
                            <img src="/images/bullet_red.png" style="float:left;margin-top:-2px;border:none">
                        </a>
   			            <span title="{{pf.email}}">{{pf.email}}</span>
   			        </li>	               
	           {% endfor %}
            {% else %}
	                <li>
	                    No friend request at this time
	                </li>
	        {% endif %}
		</ul>
	</div>


	<h4 style="margin-top:10px;cursor:pointer" onclick="Effect.toggle('friendAdd', 'blind', {duration:.5})">
	    <img src="/images/user_add.png" style="float:right;margin-top:-2px">Add a Friend
	</h4>
	<div class="infoBlock" id="friendAdd" style="display:block">
		<form action="/friends/add" method="post">
			<dl>
				<dt style="margin-top:0"><label for="friendname">Friend's Name:</label></dt>
				<dd><input type="text" name="friendname" id="friendname"></dd>
				{% if friendErrorName %} 
					<dd style="text-align:center;color:red;margin-top:4px;margin-bottom:4px;font-size:12px">{{friendErrorName}}</dd>
				{% endif %}
				
				<dt><label for="emailaddress">Friend's Email:</label></dt>
				<dd><input type="text" name="friendemail" id="friendemail"></dd>
				{% if friendErrorEmail %} 
					<dd style="text-align:center;color:red;margin-top:4px;margin-bottom:4px;font-size:12px">{{friendErrorEmail}}</dd>
				{% endif %}
				
				<dt style="text-align:right"><input type="submit" name="submit" id="submit" value="add friend"></dt>
			</dl>			
		</form>
	</div>
</div>